
import React,{ Component } from 'react';
import { Form, Icon, Input, Button,InputNumber,TreeSelect } from 'antd';
const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;
//水平登录栏，常用在顶部导航栏中
class TestTreeSelect1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            //arr: [],
            //defaultArr: [1,2]
        }
    }
    componentDidMount() {
        //this.props.form.validateFields();
    }
    /**
     *
     * onSubmitEvent() 提交
     */
    onSubmitEvent(e) {
        e.preventDefault();
        console.log("提交");
        this.props.form.validateFields((err,value)=>{
            if(!err) {
               console.log('得到的值是：',value);
            }else {
                console.log('错误提示：',err);
            }
        });
    }
    handleChange(value) {
        this.props.form.setFieldsValue({ email: [1,2] })
        // console.log('过滤之前的数组：',value);
        let filterArr = value && value.filter((item,index)=>{
            return item !== '工单组';
        })
        //this.props.form.setFieldsValue({ email: filterArr })
        //console.log('过滤之后的数组：',filterArr);
        this.setState({
            value: filterArr,
        },()=>{
            this.props.form.setFieldsValue({ email: filterArr })

        })
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={ this.onSubmitEvent.bind(this)}>
                <FormItem>
                    {
                        getFieldDecorator('email',{
                            rules: [{ required: true, message: '邮件客服不能为空!' }],
                        })(
                            <TreeSelect
                                //value={ this.state.value }
                                style={{ width: 600 }}
                                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                placeholder="Please select"
                                treeDefaultExpandAll
                                showSearch="true"
                                allowClear
                                multiple
                                onChange = { this.handleChange.bind(this) }
                                //onSelect = { this.selectEvent.bind(this) }
                                //treeNodeFilterProp="工单组"
                            >
                                <TreeNode value="开发组" title="开发组" key="0">
                                    <TreeNode value="开发组1" title="开发组1" key="0-1"></TreeNode>
                                    <TreeNode value="开发组2" title="开发组2" key="0-2"></TreeNode>
                                </TreeNode>
                                <TreeNode value="测试组" title="测试组" key="1">
                                    <TreeNode value="测试组1" title="测试组1" key="1-1"></TreeNode>
                                    <TreeNode value="测试组2" title="测试组2" key="1-2"></TreeNode>
                                </TreeNode>
                                <TreeNode value="工单组" title="工单组" key="3">
                                    <TreeNode value="工单组1" title="工单组1" key="3-1"></TreeNode>
                                    <TreeNode value="工单组2" title="工单组2" key="3-2"></TreeNode>
                                    <TreeNode value="工单组3" title="工单组3" key="3-3"></TreeNode>
                                    <TreeNode value="工单组4" title="工单组4" key="3-4"></TreeNode>
                                </TreeNode>
                                <TreeNode value="AI组" title="AI组" key="4">
                                    <TreeNode value="AI组1" title="AI组1" key="4-1"></TreeNode>
                                    <TreeNode value="AI组2" title="AI组2" key="4-2"></TreeNode>
                                </TreeNode>
                            </TreeSelect>
                        )
                    }
                    
                </FormItem>
                <FormItem>
                    <Button
                        type="primary"
                        htmlType="submit"
                    >
                        提交
                    </Button>
                </FormItem>
            </Form>
        )
    }
}
export default Form.create()(TestTreeSelect1);

